<template>
  <div class="body">
    <user-head></user-head>
    <el-table ref="table" :data="tableData" highlight-current-row style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column label="商品图片" width="120">
        <template slot-scope="scope">
          <el-image :src="path + 'image/' + scope.row.picUrl" fit="fit"></el-image>
        </template>
      </el-table-column>
      <el-table-column property="bookName" label="书籍名称" width="120"></el-table-column>
      <el-table-column property="num" label="数量"></el-table-column>
      <el-table-column property="price" label="总价"></el-table-column>
      <el-table-column label="物流状态" property="logisticsState" :formatter="formatter"></el-table-column>
      <el-table-column label="物流详情" property="logisticsRemark" :formatter="formatter"></el-table-column>
      <el-table-column label="状态" property="state" :formatter="formatter"></el-table-column>
      <el-table-column label="评价" property="comment"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="finish(scope.row)" type="text" size="small" v-if = "scope.row.state != '3'" >收货</el-button>
          <el-button @click="commentOne(scope.row)" type="text" size="small" v-if = "scope.row.comment === ''||scope.row.comment === null" >评价</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="评论内容" :visible.sync="dialogFormVisible" v-dialogDrag append-to-body>
    
      <el-input v-model="comment" placeholder="评论内容"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="define()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import GLOBAL from "../../Global.vue";
import Head from "./Head.vue";
export default {
  components: {
    "user-head": Head,
  },
  data() {
    return {
      path: GLOBAL.BASE_URL,
      tableData: [],
      dialogFormVisible: false,
      addresses: [],
      address: "",
      select: true,
      row: {},
      comment:"",
      commentOrderId:"",
    };
  },
  methods: {
    define(){
      var user = JSON.parse(localStorage.user);
      this.COMMON.httpPost(
        this,
        "commentOperation/insert",
        {"userId":user.id,orderId:this.commentOrderId,comment:this.comment},
        (result) => {
          if (result.result === "SUCCESS") {
            this.getMyOrder();
          }
        },
        (result) => {}
      );
    },
    commentOne(row){
      this.commentOrderId = row.id;
      this.dialogFormVisible = true;
    },
    // 收货
    finish(row) {
      var user = JSON.parse(localStorage.user);
      this.COMMON.httpPost(
        this,
        "ordersOperation/finishOrder",
        {"userId":user.id,id:row.id},
        (result) => {
          if (result.result === "SUCCESS") {
            this.getMyOrder();
            this.dialogFormVisible = false;
          }
        },
        (result) => {}
      );
    },
    formatter(row, column, cellValue, index) {
      switch (column.property) {
        case "state": {
          switch (cellValue) {
            case "0":
              return "已支付";
            case "1":
              return "已发货";
            case "2":
              return "已收货";
            case "3":
              return "完成";
          }
        }
        case "logisticsState": {
          switch (cellValue) {
            case "0":
              return "待发货";
            case "1":
              return "已发货";
            case "2":
              return "运输中";
            case "3":
              return "派件中";
            case "4":
              return "派件完成";
          }
        }
        default: {
          return cellValue;
        }
      }
    },
    getMyOrder() {
      var user = JSON.parse(localStorage.user);
      this.COMMON.httpPost(
        this,
        "ordersOperation/getUserOrder",
        {
          
        },
        (result) => {
          if (result.result === "SUCCESS") {
            this.tableData = result.list;
          }
        },
        (result) => {}
      );
    },
  },
  created: function () {
    this.getMyOrder();
  },
};
</script>

<style>
.body {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: 0px;
  padding: 0;
}
</style>